/*
 * @Author: hongbin
 * @Date: 2021-12-17 13:41:13
 * @LastEditors: hongbin
 * @LastEditTime: 2021-12-18 18:45:59
 * @Description:查看单篇博客
 */
import { View, Text, ScrollView } from "@tarojs/components";
import {
  useReady,
  useRouter,
  request,
  showToast,
  setNavigationBarTitle
} from "@tarojs/taro";
import { styled } from "linaria/lib/react";
import React, { FC, ReactElement, useState } from "react";
import MarkDownParse from "../../components/MarkDownParse";
import { BlogDetail } from "../..//api/types";
import { Title } from "../../components/BlogCard";
import Tag from "../../components/BlogCard/Tag";
import { FlexCenterBox } from "../../components/View";

interface IProps {}

const Blog: FC<IProps> = (): ReactElement => {
  const { params } = useRouter();
  const [blog, setBlog] = useState<BlogDetail | null>(null);

  useReady(() => {
    const { id } = params;
    console.log("/getBlogById", id);
    request({
      url: "https://api.hongbin.xyz:3002/getBlogById",
      data: { id },
      method: "GET",
      success: function({ data }) {
        setBlog(data);
        console.log(data);
        setNavigationBarTitle({ title: data.title });
      },
      fail: function() {
        showToast({ title: "请求失败", icon: "error", duration: 2000 });
      }
    });
  });

  if (!blog) return <Text>load...</Text>;

  return (
    <Container scrollY enableFlex>
      <Title style={{ fontSize: "1.3rem" }}>{blog.title}</Title>
      <FlexCenterBox>
        <UserName>作者:{blog.sender[0].username}</UserName>
        <Tag type="browse" count={blog.browseCount} />
        <Tag type="thumbsUp" count={blog.thumbsUp} />
        <Tag type="comment" count={blog.commentCount} />
      </FlexCenterBox>
      <Content>
        <MarkDownParse>{blog.content}</MarkDownParse>
      </Content>
    </Container>
  );
};

export default Blog;

const UserName = styled(Text)`
  background-color: #0d8278;
  color: #fffae5;
  border-radius: 10px;
  padding: 0 0.5rem;
  margin: 0.5rem;
  font-size: 28px;
`;

const Content = styled(View)`
  background-color: #fff;
  width: 96vw;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 1rem;
`;

const Container = styled(ScrollView)`
  width: 100vw;
  animation: fadeShow 1s ease forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 5rem;

  @keyframes fadeShow {
    from {
      opacity: 0;
      transform: translateY(3rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
`;
